<template>
    <div>
        <transition :css="false"    @before-leave="beforeLeave" @after-leave="afterleave" @leave="leave" @before-enter="beforeEnter" @after-enter="afterenter" @enter="enter"
        >
            <p v-show='isShow'></p>
        </transition>

        <button @click="showAnima">点击我</button>
    </div>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
               isShow : false 
            }
        },
        mounted(){
            
            
            
        },
        methods : {
            showAnima(){
                var _this = this;
                setTimeout(function(){
                    _this.isShow=!_this.isShow
                },100)
            },


            beforeLeave(el){
                console.log('beforeLeave');
                el.style.backgroundColor = 'yellow' 
            },
            leave(el,done){//done表示过渡万执行none
                console.log('leave');
                el.style.transition = 'all 3s';
                setTimeout(function(){
                    done()//其实就是调用了afterleave
                },4000)

                // done()
            },
            afterleave(el){
                console.log('afterleave')
                el.style.backgroundColor = 'blue' 
                // el.style.display = 'block'          
            },
            beforeEnter(el){
                console.log('beforeEnter');
                el.style.backgroundColor = 'red'
            },
            afterenter(el){
                console.log('afterenter')
                el.style.backgroundColor = 'green'
            },
            enter(el,done){//done表示过渡万执行block
                console.log('enter');           
                el.style.transition = 'all 2s';
            
                //如果不在timeout里面调用
                // console.log(el.offsetHeight);
                //如果这里不访问一次offsetHeight让浏览器渲染这个元素的话，那么红色会直接被绿色替代，这时浏览器的优化渲染机制，合并异化渲染
                // done();//调用afterEnter,触发绿色
              

                setTimeout(function(){
                    done();
                },20)

            }

        }
        
    }
</script>

<style scoped>
    p{height: 20px;background-color: #ddd}
</style>
